<template>
    <div class="container">
        <div class="header">
            <van-image fit="contain" src="/wxchat/images/xxgs.png" />
            <div class="title">
                <span class="text">
                    {{ currentPeriod.period }} 及时率排名
                </span>
            </div>
        </div>
        <div class="body">
            <div class="customer" v-for="(item, index) in currentPeriod.childs" :key="index">
                <p class="text">{{ index + 1 }}. {{ item.userID }} {{ item.userName }}</p>
                <van-progress stroke-width="8" :percentage="item.rate" :color="colors[index]" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Progress as VanProgress, Image as VanImage, showNotify } from 'vant'
import type { otd } from '@/types/data'
import { getOTDApi } from '@/api/index'

const currentPeriod = ref<otd>({
    period: '',
    childs: []
})

const colors = ref(['#B22222', '#FF6A6A', '#CD9B9B', '#CDCD00', '#FFFF00', '#2E8B57', '#556B2F', '#20B2AA', '#7FFFD4', '#B0C4DE'])

onMounted(() => {
    getOTDApi().then(({ data }) => {
        console.log(data)
        currentPeriod.value = data;
    }).catch((err) => {
        showNotify(
            { type: 'warning', message: '网络未连接' }
        );
    })
})
// const currentPeriod = ref({
//     period: '202310',
//     childs: [{
//         order: 1,
//         id: 'BM0038',
//         name: '青岛金三宇公路护栏有限公司',
//         percent: 80
//     }, {
//         order: 2,
//         id: 'BZ0007',
//         name: '上运纸箱包装厂',
//         percent: 70
//     }, {
//         order: 3,
//         id: 'BZ0011',
//         name: '青岛盈德利金属制品厂',
//         percent: 60
//     },]
// })
</script>
<style lang="scss" scoped>
.customer {
    text-align: left;
    margin-top: 15px;

    .text {
        line-height: 22px;
        padding: 1rem 0;
        height: 3rem;
    }
}
</style>